<!--
*@author 白晴语
*@date 2023-10-12 11:08
*@description:
-->
<template>
  <el-drawer v-model="isShow" title="设置" :with-header="true" >
    <div style="display: flex;flex-direction: column;align-items: center;">
      <el-text  class="mx-1" type="primary">前后置切换</el-text>
      <el-radio-group v-model="facingMode">
        <el-radio label="user" size="large" border style="margin-top: 5px">前置</el-radio>
        <el-radio label="environment" size="large" border style="margin-top: 5px">后置</el-radio>
      </el-radio-group>
    </div>
    <div style="display: flex; flex-direction: column; align-items: center;">
      <el-text class="mx-1" type="primary">检测识别类型</el-text>
      <el-radio-group v-model="detection" style="flex-direction: column; align-items: center;margin-left: 10%">
        <el-radio label="landmark" size="large" border style="margin-top: 5px">轮廓检测</el-radio>
        <el-radio label="expression" size="large" border style="margin-top: 5px">表情检测</el-radio>
        <el-radio label="age_gender" size="large" border style="left: -11%;margin-top: 5px">年龄检测</el-radio>
      </el-radio-group>
    </div>
    <div style="display: flex; flex-direction: column; align-items: center;">
      <el-text class="mx-1" type="primary">边框或者面部</el-text>
      <el-radio-group v-model="withBoxes">
        <el-radio label='1' size="large" border style="margin-top: 5px">边框</el-radio>
        <el-radio label='0' size="large" border style="margin-top: 5px">面部</el-radio>
      </el-radio-group>
    </div>
    <div style="display: flex; flex-direction: column; align-items: center;">
      <el-text class="mx-1" type="primary">检测人脸数</el-text>
      <el-radio-group v-model="detectFace">
        <el-radio label="detectSingleFace" size="large" border style="margin-top: 5px">可信单</el-radio>
        <el-radio label="detectAllFaces" size="large" border style="margin-top: 5px">模糊多</el-radio>
      </el-radio-group>
    </div>
    <div style="display: flex; flex-direction: column; align-items: center;">
      <el-text class="mx-1" type="primary">选择算法模型</el-text>
      <el-radio-group v-model="nets" style="flex-direction: column; align-items: center;margin-left: 10%">
        <el-radio label="ssdMobilenetv1" size="large" border style="margin-top: 5px">ssdMobilenetv1</el-radio>
        <el-radio label="tinyFaceDetector" size="large" border style="margin-top: 5px">tinyFaceDetector</el-radio>
        <el-radio label="mtcnn" size="large" border style="left: -11%;margin-top: 5px">mtcnn</el-radio>
      </el-radio-group>
    </div>
  </el-drawer>
</template>
<script>
export default {
  name: "RightControBar",
  components: {},
  data() {
    return {
      isShow: false,
      facingMode:'environment',
      detection:'landmark',
      withBoxes:'1',
      detectFace:'detectSingleFace',
      nets:"tinyFaceDetector",
    }
  },
  watch:{
    facingMode(newVal){
      this.$emit('ruleListener',[newVal,'facingMode'])
    },
    detection(newVal){
      this.$emit('ruleListener',[newVal,'detection'])
    },
    detectFace(newVal){
      this.$emit('ruleListener',[newVal,'detectFace'])
    },
    withBoxes(newVal){
      this.$emit('ruleListener',[newVal,'withBoxes'])
    },
    nets(newVal){
      this.$emit('ruleListener',[newVal,'nets'])
    }
  }
}
</script>

<style scoped>

</style>
 